<template>
    <el-header>
        <el-row class="header-top">
            <el-col :span="6" >
                <div @click="$router.push('/home')" class="img"><img width="100%" height="100%" src="../../../static/images/logo.gif" alt=""></div>
            </el-col>
            <el-col :span="15" class="form">
                <el-form :inline="true" class=" demo-form-inline">
                    <el-form-item >
                        <el-input  class="input" v-model="searchContent" prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search()">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col v-if="flag" class="icon" :span="3">
                    <el-dropdown placement="bottom" trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link">
                            <i class="fa fa-shopping-cart"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <h4 class="dropdown-shop">购物车</h4>
                            <el-dropdown-item icon="el-icon-plus">
                                <el-row>
                                    <el-col :span="8"><img width="100%" src="http://10.203.0.101:8081/shopping/resources/upload/97812ce7d175451484ce43705ad6d5c3.jpg" alt=""></el-col>
                                    <el-col :span="16">
                                        <el-row class="shop-title">密园小农 密云当地新鲜西红柿 约2</el-row>
                                        <el-row style="color:#F07057">135.00</el-row>
                                    </el-col>
                                </el-row>
                            </el-dropdown-item>
                            <el-dropdown-item icon="el-icon-plus">
                                <el-row>
                                    <el-col :span="8"><img width="100%" src="http://10.203.0.101:8081/shopping/resources/upload/97812ce7d175451484ce43705ad6d5c3.jpg" alt=""></el-col>
                                    <el-col :span="16">
                                        <el-row class="shop-title">密园小农 密云当地新鲜西红柿 约小农 密云当地新鲜西红柿 约小农 密云当地新鲜西红柿 约2</el-row>
                                        <el-row style="color:#F07057">73.50</el-row>
                                    </el-col>
                                </el-row>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-row class="allPrice">
                                    <el-col :span="8" >共:208.50</el-col>
                                    <el-col  :span="6" :offset="6"><el-button @click="target()"  type="danger" size="small">查看购物车</el-button></el-col>
                                </el-row>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
            </el-col>
            <slot/>
        </el-row>
    </el-header>
</template>

<script>
export default {
    name:'HeaderTop',
    props:['flag'],
    data(){
        return {
            searchContent:''
        }
    },
    methods:{
        handleCommand(command){
            console.log(command)
        },
        target(){
            this.$router.push('/cart')
        },
        search(){
            let search = this.searchContent
            if (!search) {
                this.$message({
                    type:'warning',
                    message:'请输入查询内容！'
                })
                return
            }
            this.$router.push({
                path:'/search',
                query:{
                    search
                }
            })
        },
    }
}
</script>

<style scoped>
.el-tabs{
    float: right;
    line-height: 61px;
    height: 61px;
}
.el-header{
    border-top: 1px solid #bfa;

}
.header-top{
    padding: 0 60px;
    overflow: hidden;
    height: 101px;
}
.img{
    cursor: pointer;
    width: 200px;
    height: 50px;
    line-height: 101px;
}

.input{
    width: 500px;
}
.form{
    padding: 30px 10px 0 10px ;
}
.icon{
    padding: 40px 10px 0 10px;
}
.header-bot{
    padding: 0px 60px;
    padding-bottom: 20px;
}



.dropdown-shop{
    text-align: center;
}
.el-dropdown-menu{
    width: 300px;
}
.shop-title{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.allPrice{
    line-height: 40px;
    text-align: center;
}
</style>